<!-- 火山锥-面 -->
<template>
    <el-drawer v-model="addDrawer" size="50%" :show-close="false" @opened="openDrawer" @close="closeDrawer">
        <template #title>
            <h2><svg-icon icon-class="list"></svg-icon><span style="padding-left: 15px">{{ typeName }}</span></h2>
            <el-button type="primary" @click="confirmClick" :disabled="drawerLoading" v-if="isShowSave">保存</el-button>
            <el-button type="primary" @click="closeDrawer">关闭</el-button>
        </template>
        <template #default>
            <el-form :model="form" ref="addRef" :inline="true" :rules="formRules" label-width="200px"
                v-loading="drawerLoading">
                <el-row justify="space-between">
                    <el-form-item label="省">
                        <el-input v-model="form.province" clearable disabled></el-input>
                    </el-form-item>
                    <el-form-item label="市">
                        <el-input v-model="form.city" clearable disabled></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="区/县">
                        <el-input v-model="form.county" clearable disabled></el-input>
                    </el-form-item>
                    <el-form-item label="火山锥编号" prop="id">
                        <el-input v-model="form.id" placeholder="请输入火山锥编号" clearable maxlength="17"></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="锥体名称" prop="coneName">
                        <el-input v-model="form.coneName" placeholder="请输入锥体名称" clearable maxlength="100"></el-input>
                    </el-form-item>
                    <el-form-item label="锥体类型" prop="coneType">
                        <dict-select code="VolcanicConeTypeCVD" :value="form.coneType" @update="val => form.coneType = val"></dict-select>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="锥体形态" prop="coneMorphology" style="width:100%">
                        <el-input v-model="form.coneMorphology" placeholder="请输入锥体形态" :autosize="{ minRows: 3, maxRows: 6 }"
                            type="textarea" show-word-limit maxlength="255" clearable></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="锥体高度[米]" prop="coneHeight">
                        <el-input v-model="form.coneHeight" placeholder="请输入锥体高度[米]" clearable maxlength="8"></el-input>
                    </el-form-item>
                    <el-form-item label="火口深度[米]" prop="craterDepth">
                        <el-input v-model="form.craterDepth" placeholder="请输入火口深度[米]" clearable maxlength="8"></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="内坡度" prop="insideSlopeAngle">
                        <el-input v-model="form.insideSlopeAngle" placeholder="请输入内坡度" clearable maxlength="8"></el-input>
                    </el-form-item>
                    <el-form-item label="外坡度" prop="outsideSlopeAngle">
                        <el-input v-model="form.outsideSlopeAngle" placeholder="请输入外坡度" clearable maxlength="8"></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="锥体底部直径" prop="bottomDiameter">
                        <el-input v-model="form.bottomDiameter" placeholder="请输入锥体底部直径" clearable maxlength="8"></el-input>
                    </el-form-item>
                    <el-form-item label="火口垣直径" prop="craterWallsDiameter">
                        <el-input v-model="form.craterWallsDiameter" placeholder="请输入火口垣直径" clearable maxlength="8"></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="火口直径" prop="craterDiameter">
                        <el-input v-model="form.craterDiameter" placeholder="请输入火口直径" clearable maxlength="8"></el-input>
                    </el-form-item>
                    <el-form-item label="溢出口方向" prop="overfallDirection">
                        <dict-select code="CVD-16-Direction" :value="form.overfallDirection" @update="val => form.overfallDirection = val"></dict-select>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="堆积物类型" prop="depositType" style="width:100%">
                        <el-input v-model="form.depositType" placeholder="请输入堆积物类型" :autosize="{ minRows: 3, maxRows: 6 }"
                            type="textarea" show-word-limit maxlength="255" clearable></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="堆积物厚度" prop="depositThickness">
                        <el-input v-model="form.depositThickness" placeholder="请输入堆积物厚度" clearable maxlength="8"></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="堆积物粒度" prop="depositGranularity" style="width:100%">
                        <el-input v-model="form.depositGranularity" placeholder="请输入堆积物粒度" :autosize="{ minRows: 3, maxRows: 6 }"
                            type="textarea" show-word-limit maxlength="255" clearable></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="塑性熔岩饼单体尺寸[米]" prop="lavaDribletSize">
                        <el-input v-model="form.lavaDribletSize" placeholder="请输入塑性熔岩饼单体尺寸[米]" clearable maxlength="8"></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="锥体结构组成剖面图图片" prop="coneStructureProfileAiid" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <el-input v-model="form.coneStructureProfileAiid" placeholder="锥体结构组成剖面图图片" clearable maxlength="20"></el-input>
                        </el-space>
                    </el-form-item>
                    <el-form-item label=" " prop="coneStructureProfileAiidId" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <ImageUpload v-model="form.coneStructureProfileAiidName" @uploadImage="uploadSuccess('coneStructureProfileAiid', $event)"
                                @delImage="deleteFile('coneStructureProfileAiid', $event)" />
                        </el-space>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="锥体结构组成剖面图原始文件" prop="coneStructureProfileArwid" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <el-input v-model="form.coneStructureProfileArwid" placeholder="锥体结构组成剖面图原始文件" clearable maxlength="20"></el-input>
                        </el-space>
                    </el-form-item>
                    <el-form-item label=" " prop="coneStructureProfileArwidId" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <FileUpload v-model="form.coneStructureProfileArwidName" @uploadFile="uploadSuccess('coneStructureProfileArwid', $event)"
                                @delFile="deleteFile('coneStructureProfileArwid', $event)" />
                        </el-space>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="岩石包体类型" prop="rockInclusionType" style="width:100%">
                        <el-input v-model="form.rockInclusionType" placeholder="请输入岩石包体类型" :autosize="{ minRows: 3, maxRows: 6 }"
                            type="textarea" show-word-limit maxlength="255" clearable></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="岩石包体数量" prop="rockInclusionNum">
                        <el-input v-model="form.rockInclusionNum" placeholder="请输入岩石包体数量" clearable maxlength="4"></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="岩石包体粒度" prop="rockInclusionGranularity" style="width:100%">
                        <el-input v-model="form.rockInclusionGranularity" placeholder="请输入岩石包体粒度" :autosize="{ minRows: 3, maxRows: 6 }"
                            type="textarea" show-word-limit maxlength="255" clearable></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="岩石包体形状" prop="rockInclusionShape" style="width:100%">
                        <el-input v-model="form.rockInclusionShape" placeholder="请输入岩石包体形状" :autosize="{ minRows: 3, maxRows: 6 }"
                            type="textarea" show-word-limit maxlength="255" clearable></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="岩石包体产出状态" prop="rockInclusionOutputState" style="width:100%">
                        <el-input v-model="form.rockInclusionOutputState" placeholder="请输入岩石包体产出状态" :autosize="{ minRows: 3, maxRows: 6 }"
                            type="textarea" show-word-limit maxlength="255" clearable></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="素描图图像" prop="sketchAiid" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <el-input v-model="form.sketchAiid" placeholder="素描图图像" clearable maxlength="20"></el-input>
                        </el-space>
                    </el-form-item>
                    <el-form-item label=" " prop="sketchAiidId" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <ImageUpload v-model="form.sketchAiidName" @uploadImage="uploadSuccess('sketchAiid', $event)"
                                @delImage="deleteFile('sketchAiid', $event)" />
                        </el-space>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="素描图原始文件" prop="sketchArwid" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <el-input v-model="form.sketchArwid" placeholder="素描图原始文件" clearable maxlength="20"></el-input>
                        </el-space>
                    </el-form-item>
                    <el-form-item label=" " prop="sketchArwidId" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <FileUpload v-model="form.sketchArwidName" @uploadFile="uploadSuccess('sketchArwid', $event)"
                                @delFile="deleteFile('sketchArwid', $event)" />
                        </el-space>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="照片文件编号" prop="photoAiid" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <el-input v-model="form.photoAiid" placeholder="照片文件编号" clearable maxlength="20"></el-input>
                        </el-space>
                    </el-form-item>
                    <el-form-item label=" " prop="photoAiidId" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <ImageUpload v-model="form.photoAiidName" @uploadImage="uploadSuccess('photoAiid', $event)"
                                @delImage="deleteFile('photoAiid', $event)" />
                        </el-space>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="照片原始文件编号" prop="photoArwid" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <el-input v-model="form.photoArwid" placeholder="照片原始文件编号" clearable maxlength="20"></el-input>
                        </el-space>
                    </el-form-item>
                    <el-form-item label=" " prop="photoArwidId" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <FileUpload v-model="form.photoArwidName" @uploadFile="uploadSuccess('photoArwid', $event)"
                                @delFile="deleteFile('photoArwid', $event)" />
                        </el-space>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="照片集镜向及拍摄者说明文档" prop="photoDescArwid" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <el-input v-model="form.photoDescArwid" placeholder="照片集镜向及拍摄者说明文档" clearable maxlength="20"></el-input>
                        </el-space>
                    </el-form-item>
                    <el-form-item label=" " prop="photoDescArwidId" style="width:100%">
                        <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
                            <FileUpload v-model="form.photoDescArwidName" @uploadFile="uploadSuccess('photoDescArwid', $event)"
                                @delFile="deleteFile('photoDescArwid', $event)" />
                        </el-space>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="拍摄者" prop="photographer" style="width:100%">
                        <el-input v-model="form.photographer" placeholder="请输入备注" :autosize="{ minRows: 3, maxRows: 6 }"
                            type="textarea" show-word-limit maxlength="255" clearable></el-input>
                    </el-form-item>
                </el-row>
                <el-row justify="space-between">
                    <el-form-item label="备注" prop="commentInfo" style="width:100%">
                        <el-input v-model="form.commentInfo" placeholder="请输入备注" :autosize="{ minRows: 6, maxRows: 12 }"
                            type="textarea" show-word-limit maxlength="2147483647" clearable></el-input>
                    </el-form-item>
                </el-row>
            </el-form>
        </template>
    </el-drawer>
</template>
<script setup>
// 引入基础方法
import useSpatialData from '@/hooks/useSpatialData';
// 引入表单验证规则
import { eightDouble, fourInt } from '@/utils/validate';
const { route, addDrawer, drawerLoading, form, typeName, openDrawer, closeDrawer, confirmClick, uploadSuccess, deleteFile, isShowSave } = useSpatialData();
// 表单验证规则
const formRules = {
    // id: [{ required: true, message: '请输入火山锥编号！', trigger: 'blur' }],
    coneHeight: [eightDouble],
    craterDepth: [eightDouble],
    insideSlopeAngle: [eightDouble],
    outsideSlopeAngle: [eightDouble],
    bottomDiameter: [eightDouble],
    craterWallsDiameter: [eightDouble],
    craterDiameter: [eightDouble],
    depositThickness: [eightDouble],
    lavaDribletSize: [eightDouble],
    rockInclusionNum: [fourInt],
}
</script>
<style lang="scss" scoped></style>